/* eslint-disable no-unused-vars */
import { useNavigate } from "react-router-dom";
import { useState } from "react";
import { TabBar } from "antd-mobile";
import {
  AppOutline,
  MessageOutline,
  MessageFill,
  UnorderedListOutline,
  UserOutline,
} from "antd-mobile-icons";
import { useEffect } from "react";

const MyTabBar = () => {
  const hash = location.hash.split("/");

  useEffect(() => {
    if (hash[1] === "") {
      setActiveKey("/");
    } else {
      setActiveKey(hash[1]);
    }
  }, [hash]);

  const onChange = (path) => {
    nav(path);
  };

  const nav = useNavigate();
  const tabs = [
    {
      key: "/",
      title: "首页",
      icon: <AppOutline />,
    },
    {
      key: "medicine",
      title: "药品",
      icon: <UnorderedListOutline />,
    },
    {
      key: "news",
      title: "咨询",
      icon: (active) => (active ? <MessageFill /> : <MessageOutline />),
    },
    {
      key: "user",
      title: "我的",
      icon: <UserOutline />,
    },
  ];

  const [activeKey, setActiveKey] = useState("/");

  return (
    <>
      <TabBar
        activeKey={activeKey}
        onChange={onChange}>
        {tabs.map((item) => (
          <TabBar.Item
            key={item.key}
            icon={item.icon}
            title={item.title}
          />
        ))}
      </TabBar>
    </>
  );
};

export default MyTabBar;
